<template>
  <div :class="$style.container">
    <hVideo :film="film"/>
    <Comment 
      :name="film.original_title" 
      :douban-id="film.doubanId" 
      :is-display-editor="isDisplayEditor"
      @commentSuccess="handleCommentSuccess"/>
    <CommentList 
      :lists="commentLists" 
      @getCommentLists="handleCommentSuccess"/>
  </div>
</template>

<script>
import HVideo from '../components/detail/video'
import Comment from '../components/detail/comment'
import CommentList from '../components/detail/commentList'
import http from '../APIService/http'

export default {
  components: {
    HVideo,
    Comment,
    CommentList
  },
  data() {
    return {
      commentLists: [],
      userId: ''
    }
  },
  computed: {
    isDisplayEditor() {
      return this.commentLists.some(item => Number(item.from) === this.userId)
    }
  },
  async asyncData(ctx) {
    try {
      let params = {
        id: ctx.query.id,
        token: ctx.app.$cookiz.get(ctx.app.$api.token)
      }
      let res = await http.get(`/dianshang/getFilmDetail`, params)
      if (res.code === 0) {
        let item = res.data
        return { film: res.data }
      }
      return { film: {} }
    } catch (err) {
      console.log('film detail fail:', err)
    }
  },
  mounted() {
    this.userId = this.$store.state.user.user.userId
    this.getCommentLists()
  },
  methods: {
    handleCommentSuccess() {
      this.getCommentLists()
    },
    // 获取评论列表
    async getCommentLists() {
      try {
        let params = {
          id: this.film.doubanId
        }
        let res = await http.get(`/comment/lists`, params)
        if (res.code === 0) {
          this.commentLists = res.data
        }
      } catch (err) {
        console.log(`get comment lists fail:`, err)
      }
    }
  }
}
</script>

<style lang='scss' module>
.container {
}
</style>
